<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box {width:250px;margin: 150px auto 0; font-size: 20px;}
		#div1 {height: 30px;padding: 4px 8px; line-height: 30px;border: 2px solid orange;padding-left: 8px; font-weight: bold;}
		#div2 {display: none;}
		#div2 a {height: 30px; line-height: 30px; text-decoration: none; display: block; border: 1px solid orange;border-top: none;padding: 4px 8px; color: #000;}
		a:hover{background-color: #aaf999}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');
		var oLis = document.getElementById('div2');
		var aA = document.getElementsByTagName('a');

		oDiv.onclick = function (ev){
			var ev = ev || event;

			ev.cancelBubble = true;

			oLis.style.display = 'block';
		};

		document.onclick = function (){
			oLis.style.display = 'none';
		}

		for (var i = 0; i < aA.length; i++) {
			aA[i].onclick = function (){
				oDiv.innerHTML = this.innerHTML;
				// oLis.style.display = 'none';这一句是多余的
			}
		};
	}
	</script>
</head>
<body>
	<div id="box">
		<div id="div1">请选择字体</div>
		<div id="div2">
			<a href="javascript:;">宋体</a>
			<a href="javascript:;">楷体</a>
			<a href="javascript:;">微软雅黑</a>
			<a href="javascript:;">仿宋</a>
			<a href="javascript:;">黑体</a>
		</div>
	</div>
</body>
</html>